<template>
	<div class="home">
		
		<view class="cu-custom">
			<view class="cu-bar" :style="{
					height: wanlsys.height + 'px', 
					paddingTop: wanlsys.top + 'px'
				}">
				<div class="publics_nav_item" :class="index===nav_active?'publics_nav_active':''"
					v-for="(item,index) in navs" :key="index" @click="ToLists(index)">
					{{item}}
					<text></text>
				</div>
			</view>
		</view>
		
		<swiper style="height:calc(100% - 100upx);background: #f3f3f3;">

			<swiper-item>
				<scroll-view class="scroll-view" style="padding: 20upx;" scroll-y="true" lower-threshold="200" @scrolltolower="onTolower"
					@refresherrefresh="onRefresh" @scroll="onScroll">

					<cl-waterfall ref="waterfall" class="find_box" :column="column" v-model="list">
						<cl-waterfall-column v-for="(children, index2) in list" :key="index2">
							
							<view v-for="(item, index) in children" :key="index" >
								<view class="find_box_item" @tap="ToFind(item)">
									<div class="find_box_item_t">
										<image :src="$wanlshop.oss(item.image_url, 400, 0)" mode="widthFix"></image>
									</div>
									<div class="find_box_item_name" style="height: 65upx;overflow: hidden;">
										{{item.title}}
									</div>
									<div class="find_box_item_more">
										<div>
											<image src="../../static/images/new/sc_selected.png" v-if="item.isFollow"
												@tap="onFollow(index)"></image>
											<image src="../../static/images/new/sc.png" v-else @tap="onFollow(index)">
											</image>
											<text>{{item.follows}}</text>
										</div>
										<div>
											<image src="../../static/images/new/dz_selected.png" v-if="item.isLike"
												@tap="onLike(index)"></image>
											<image src="../../static/images/new/dz.png" v-else @tap="onLike(index)">
											</image>
											<text>{{item.like}}</text>
										</div>
									</div>
									<div class="find_box_item_more">
										<div
											style="margin-right: 0;height: 35upx;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;">
											<text>{{item.shop.shopname}}</text>
										</div>
									</div>
								</view>
							</view>

						</cl-waterfall-column>
					</cl-waterfall>

				</scroll-view>

			</swiper-item>

		</swiper>
	</div>

</template>

<script>
	import { mapState, mapActions } from 'vuex';
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	export default {
		computed: {
			...mapState(['user', 'common', 'update', 'statistics'])
		},
		components: {
			waterfallsFlow,
		},
		data() {
			return {
				wanlsys: this.$wanlshop.wanlsys(),
				navs: ["赞/收藏", "发现", "评论"],
				nav_active: 1,
				height: null,
				scrollLeft: 0,
				scrollTop: 0,
				find: {
					data: [],
					triggered: true,
					_freshing: true,
					current_page: 1,
				},
				column: 2,
				list: [],
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.height = this.wanlsys.windowHeight + this.wanlsys.windowBottom - this.wanlsys.height - 32;
			// #endif
			// #ifdef H5
			this.height = this.wanlsys.windowHeight + this.wanlsys.windowBottom - this.wanlsys.height - 50 - 32;
			// #endif
			// #ifdef MP
			this.height = this.wanlsys.windowHeight - this.wanlsys.height - 32;
			// #endif
			this.loadData();
		},
		onReady() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 判断网络类型
			uni.getNetworkType({
			    success: (res) => {
					if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
						this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
					}else if(res.networkType == 'none'){
						this.$wanlshop.msg('没有网络');
					}
			    }
			});
		},
		onPageScroll(e) {
			let tmpY = 300;
			e.scrollTop = e.scrollTop > tmpY ? 300 : e.scrollTop; //如果当前高度大于250则250否则当前高度
		},
		methods: {
			ToLists(index) {
				uni.navigateTo({
					url: '/pages/find/lists?index=' + index
				});
			},
			ToFind(find) {
				if (find.type == 'video') {

					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/find/details/video?id=' + find.id
					});
					return false;
					// #endif

					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '/pages/find/details/details?id=' + find.id
					});
					return false;
					// #endif

					uni.showToast({
						title: '暂不支持',
						icon: 'none',
						duration: 2000
					})
					return false;
				} else {
					uni.navigateTo({
						url: '/pages/find/details/details?id=' + find.id
					});
				}
			},
			async loadData() {
				let find = this.find;
				if(find.status == 'noMore'){
					
				}
				this.$api.get({
					url: '/wanlshop/find/find',
					data: {
						page: find.current_page,
						type: ''
					},
					success: res => {
						// 判断是否上拉状态
						if (find.triggered) {
							//触发onRestore，并关闭刷新图标
							find.triggered = false;
							find._freshing = false;
							find.data = res.data;
						} else {
							find.data = find.data.concat(res.data);
						}
						this.$refs["waterfall"].append(res.data);
						
						//当前页码
						find.current_page = res.current_page;
						//总页码
						find.last_page = res.last_page;
						find.status = res.total == 0 ? 'noMore' : 'more';
					},
				});
			},
			// 下拉刷新
			onRefresh() {
				if (this.find._freshing) return;
				this.find._freshing = true;
				if (!this.find.triggered)
					//界面下拉触发，triggered可能不是true，要设为true
					this.find.triggered = true;
				this.find.current_page = 1;
				this.loadData();
				this.$refs.waterfallsFlow.refresh();
			},
			// 上拉加载更多
			onTolower() {
				//判断是否最后一页
				if (this.find.current_page >= this.find.last_page) {
					this.find.status = 'noMore';
				} else {
					this.find.current_page = this.find.current_page + 1; //页码+1
					this.find.status = 'loading';
					this.loadData();
				}
			},
			// 监听滚动
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			// 格式化html
			formatHtml(content) {
				return (content.replace(/<\/?.+?>/g, "").replace(/ /g, ""));
			},
			// 关注 & 取消关注
			onFollow(index) {
				var find = this.find.data[index];
				find.isFollow = !find.isFollow;
				if (find.isFollow) {
					find.follows += 1;
				} else {
					find.follows -= 1;
				}
				this.$api.post({
					url: '/wanlshop/find/setFollow',
					data: {
						id: find.id
					},
					success: res => {
						find.isFollow = res;
					}
				});
			},
			// 喜欢 & 取消喜欢
			onLike(index) {
				var find = this.find.data[index];
				find.isLike = !find.isLike;
				if (find.isLike) {
					find.like += 1;
				} else {
					find.like -= 1;
				}
				this.$api.post({
					url: '/wanlshop/find/setLike',
					data: {
						id: find.id
					},
					success: res => {
						find.isLike = res;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-bar {
		// height: 100upx;
		display: flex;
		align-items: center;
		justify-content: center;

		.publics_nav_item {
			margin-right: 71upx;
			font-size: 30upx;
			font-weight: 400;
			color: #999999;
			// height: 70upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				height: 2px;
				background: #FF6400;
				width: 100%;
				border-radius: 2px;
				position: absolute;
				left: 0;
				bottom: 0;
				display: none;
			}
		}

		.publics_nav_item:last-child {
			margin-right: 0upx;
		}

		.publics_nav_active {
			font-size: 32upx;
			font-weight: 400;
			color: #000000;

			text {
				display: block;
			}


		}
	}

	// <div class="publics_nav">
	// 	<div class="publics_nav_item" v-for="item in navs">
	// 		{{item}}
	// 		<text></text>
	// 	</div>
	// </div>
	.find_box {
		height: auto;

		width: 100%;

		.find_box_item {
			width: 345upx;
			height: 100%;
			overflow: hidden;
			padding-bottom: 20upx;
			margin-bottom: 15upx;
			border-radius: 12upx;
			background: #FFFFFF;

			.find_box_item_t {
				width: 100%;
				height: auto;
				overflow: hidden;

				image {
					width: 100%;
					height: auto;
				}
			}

			.find_box_item_name {
				padding: 25upx;
				font-size: 32upx;
				font-weight: 400;
				color: #000000;
				text-overflow: ellipsis;
			}

			.find_box_item_more {
				padding: 10upx 25upx 5upx 25upx;
				height: auto;
				overflow: hidden;
				display: flex;
				align-items: center;

				div {
					display: flex;
					align-items: center;
					margin-right: 40upx;

					image {
						width: 24upx;
						height: 24upx;
					}

					text {
						margin-left: 8upx;
						font-size: 24upx;
						font-weight: 400;
						color: #4F4F4F;
					}
				}
			}
		}


	}

	.scroll-view {
		height: 100%;

	}

	page,
	.home {
		height: 100%;
		overflow: hidden;
	}
</style>
